<template>
	<div class="spread con customer_index">
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  	<el-breadcrumb-item :to="{ path: '/customer' }">homepage</el-breadcrumb-item>
		  	<el-breadcrumb-item>customer</el-breadcrumb-item>
		</el-breadcrumb>
	<div>
		<div style="margin-top:5px;">
			<span class="juli">CustomerName:</span>
			<el-input v-model="customername" placeholder="Search Customer Name" style="width:22%"></el-input>
			
			<el-select v-model="customerstatus" placeholder="Please choose" class="sort">
				<el-option label="Active" :value="100"></el-option>
				<el-option label="NewCustomer" :value="1"></el-option>
				<el-option label="Open" :value="110"></el-option>
			</el-select>
			<el-button type="primary" icon="el-icon-search" @click="handerSearch">Search</el-button>
		</div>
		
		<div style="margin-top:10px;">
			<el-button  type="danger" icon="el-icon-tickets" @click="AddRFQ()">Add RFQ</el-button>
			<el-button  type="danger" icon="el-icon-tickets" @click="AddNew()">Add New</el-button>
			<el-button  type="danger" icon="el-icon-tickets" @click="AddBOM()">Add BOM</el-button>
			
			<el-button  type="danger" icon="el-icon-tickets" @click="view()">View</el-button>
		<!--	<el-button  type="danger" icon="el-icon-tickets" @click="AddNewVender()">Add Vender</el-button> -->
			<el-button  type="danger" icon="el-icon-tickets" @click="Delete()">Delete</el-button> 
			
			
		</div>
		
		<div style="float:right ">
			<span class="el-pagination__total" style="margin-left: 20px;"> {{page.total}} data in total</span> 
		</div>
	</div>
		<el-table 
			v-loading="loading"
			element-loading-text="拼命加载中"
		    :data="tableData"
		    style="width: 100%"
			:height="tableHeight"
		    border
		    fit
		    highlight-current-row
    		@current-change="shandleCurrentChange"
    		@sort-change='tableSortChange'
		   >
		    <el-table-column
		      label="VIP" width="60">
		      	<template slot-scope="scope">
		        	<span></span>
		      	</template>
		    </el-table-column>
		    
		    <el-table-column
		      label="Code" width="60" >
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.CustomerCode }}</span>
		      	</template>
		    </el-table-column>
		    
		    <el-table-column
		      label="Status" width="120">
		      	<template slot-scope="scope">
		        	<span>{{ getStatusValue(scope.row.CustomerStatus) }}</span>
		      	</template> 
		    </el-table-column>
		    
		    <el-table-column
		      label="Alias" width="220" >
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.CompanyAlias }}</span>
		      	</template>
		    </el-table-column>
		    
		    <el-table-column
		      label="CompanyName" width="220">
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.CompanyName }}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="SalesReps" width="100">
		      	<template slot-scope="scope">
		        	<span >{{ scope.row.SalesList }}</span>
		      	</template>
		    </el-table-column>
		    
		    <el-table-column
		      label="Region"  width="100">
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.CountryRegion }}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="Country"  width="100">
		      	<template slot-scope="scope">
		        	<span >{{ scope.row.CountryName }}</span>
		      	</template>
		    </el-table-column>
		  		    
		    <el-table-column
		      label="OrderDate" width="100">
		      	<template slot-scope="scope">
		        	<span >{{ isTimeString(scope.row.LastOrderDate) }}</span>
		      	</template>
		    </el-table-column>
			
			<el-table-column
		      label="ContactDate" width="110">
		      	<template slot-scope="scope">
		        	<span >{{ isTimeString(scope.row.LastContactDate) }}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="Order" width="100">
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.OrderNum }}</span>
		      	</template>
		    </el-table-column>
		    
		     <el-table-column
		      label="RFQ" width="100">
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.RFQNum }}</span>
		      	</template>
		    </el-table-column>
		    
		     <el-table-column
		      label="CompanyAddress" width="200">
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.CompanyAddress }}</span>
		      	</template>
		    </el-table-column>
		  </el-table>
		  
		  <div class="block el-pagination" style="margin-top: 0px; overflow: hidden;"> 
 			<el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.size" @current-change="handleCurrentChange" :current-page.sync="page.currentPage"> 
 			</el-pagination>
		  </div>
		  
	</div>
</template>

<script type="text/javascript">
	export default {
		data(){
			var sdDate = [];
			return {
				loading:false,
				tableData: [],
				tableHeight: window.innerHeight - 403 < 560 ? 700 : (window.innerHeight - 403),
				token:"",
				listQuery:{sortby:'',order:'desc'},
				fileDwonload:false,
				customerstatus:100,
				customername:'',
				currentRow: [],
				page: {
					 total: 0,
					 size: 0, 
					 currentPage: 1,
					 num: 1,
					
					 },
					
					}
				},
				
		created(){
			
		},
		mounted() {
			const that = this;
			// 动态设置表格高度适应窗口
			window.onresize = () => {
				let a = window.innerHeight;
				that.tableHeight = a-403;
			}
		},
		methods:{
			getCostomerList(){
				this.loading = true;
			axios.get('/api/customer/customerlist?page='+this.page.num+'&companyname=' +this.customername +'&customerstatus=' +this.customerstatus).then(result => {
					if (result.data.code == 200) {
						this.tableData = result.data.result;
						this.page.total = result.data.total;
						this.page.size = result.data.size;
						this.page.per_page = result.data.last_page;
						this.loading = false;
					} else {
						this.$notify.error({
							title: 'Fail',
							message: result.data.message
						});
					}
				})
				.catch(error => {
					this.$notify.error({
						title: 'Fail',
						message: result.data.message
					});
				});
			},
			
			AddNew(){
				this.$router.push({ path: '/customer/new'});
			},
			
			AddNewVender(){
			if (this.currentRow.length <= 0) {
					this.$notify({ type: 'error', message: 'Please choose one line.' });
					return false;
					}
				this.$router.push({ path: '/customer/vender?CompanyID='+this.currentRow.CompanyID});
			},
			AddRFQ(){
				if (this.currentRow.length <= 0) {
					this.$notify({ type: 'error', message: 'Please choose one line.' });
					return false;
					}
				
				this.$router.push({ path: '/customer/rfq?CompanyID='+this.currentRow.CompanyID+'&CustomerID='+this.currentRow.CustomerID});
			},
			view(){
				if (this.currentRow.length <= 0) {
				this.$notify({ type: 'error', message: 'Please choose one line.' });
				return false;
				}
				this.$router.push({ path: '/customer/detail?CompanyID='+this.currentRow.CompanyID+'&CustomerID='+this.currentRow.CustomerID});
			},
			Delete(){
				if (this.currentRow.length <= 0) {
				this.$notify({ type: 'error', message: 'Please choose one line.' });
				return false;
				}
				axios.post('/api/customer/customerdel', {
							CustomerID  : this.currentRow.CustomerID,
							CompanyID : this.currentRow.CompanyID,
							
						  })
						  .then(res => {
							if(res.data.code ==200){
								this.$notify({
								  title: 'Success',
								  message: res.data.message,
								  type: 'success'
								});
								this.getCostomerList();
								
							}
						  	
						  })
						  .catch(error => {
							  this.$notify.error({
							    title: 'Fail',
							    message: error.data.message,
							  });
						  })
			
			
			},
			
			//时间
			shandleCurrentChange(data) {
			        this.currentRow = data;
			      },
			      tableSortChange(column){
				if (column.order === 'descending') {
			        this.listQuery.sortby = column.prop
			        this.listQuery.order = 'desc'
			      } else {
			        this.listQuery.sortby = column.prop
			        this.listQuery.order = 'asc'
			      }
			},
			//AddBOM
			
			AddBOM(){
				if(this.currentRow.length <=0){
					this.$notify({type:"error",message:"Please choose one line."});
					return false;
				}
				// 关闭跳转
			    this.$router.push({ path: '/customer/BOM',query:this.currentRow});
			
			},
						
			detailList(){
				if(this.currentRow.length <=0){
					this.$notify({type:"error",message:"Please choose one line."});
					return false;
				}
				// 关闭跳转
			    this.$router.push({ path: '/api/customer/detail?dd='+JSON.stringify(this.currentRow)})
			
			},
			handleEdit(index, row) {
		        axios.get('/api/order/status?id='+row.id+"&type=1"+"&order_sn="+row.order_sn)
					.then(res => {
						this.$notify({
	    					type:"success",
	    					title:"Success",
	    					message:res.data.message
	    				})
	    				this.getCostomerList();
						
					})
		    },
		    handerSearch(){
		  		this.page.num = 1;
		   	 	this.getCostomerList();
		    },
		    getCookie(name){
				var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
				if(arr=document.cookie.match(reg)){
					return unescape(arr[2]);
				}else{
					return null;
				}
			},
		    handleCurrentChange(val) { 
               this.page.num = val;
                this.getCostomerList();
            },
		    handleDelete(index, row) {
		        axios.get('/api/order/status?id='+row.id+"&type=2"+"&order_sn="+row.order_sn)
					.then(res => {
						this.$notify({
	    					type:"success",
	    					title:"Success",
	    					message:res.data.message
	    				})
	    				
					})
		    },
		    isTimeString(time){
		    	if(time=='' || time== null || time == 'undefined'){
		    	 return '';
		    	}else{
		    		return time.substring(0,10);
		    	}
		    },
		    getStatusValue(val){
		    	if(val == 1){
		    		return 'NewCustomer';
		    	}else if(val == 100){
		    		return 'Active';
		    	}else{
		    		return 'Open';
		    	}
		    	
		    },
		    addTime(m){
		    	return m<10?'0'+m:m 
		    },
		    
			getTime(){
				var date = new Date()
			    let y = date.getFullYear()
			    let m = date.getMonth() + 1
			    let d = date.getDate()
			    let time = y + '-' + m + '-' + d;
				let d1 = '01';
				let time1 = y + '-' + m + '-' + d1;
				this.rantime[0]=time1;
			    this.rantime[1]=time;
			},
			
			timeFormat(shijianchuo)
			{
				//shijianchuo是整数，否则要parseInt转换
				var time1 = new Date(shijianchuo);
				var y = time1.getFullYear();
				var m = time1.getMonth()+1;
				var d = time1.getDate();
				var h = time1.getHours();
				var mm = time1.getMinutes();
				var s = time1.getSeconds();
				return y+'-'+this.addTime(m)+'-'+this.addTime(d)+' '+this.addTime(h)+':'+this.addTime(mm)+':'+this.addTime(s);
			}
			
		}
	}
</script>

<style lang="scss">
	.customer_index{
		.sort.el-select .el-input {
			width: 140px;
		}
	}
  	.el-table .warning-row {
    	background: oldlace;
  	}
  	.el-select .el-input {
    	width: 120px;
  	}
  	.input-with-select .el-input-group__prepend {
    	background-color: #fff;
  	}
  	.el-table .success-row {
    	background: #f0f9eb;
  	}
  	.con{
	    .el-breadcrumb{ 
	      	height: 40px;
	    }
	 .juli{
	 	margin-left:10px;
	 	}   
  	}
	.el-pagination__total{
		float: left;
		margin-top: 2px;
	}
	.pages{
		float: right;
	}
</style>
